@use "sass:math";
@use "sass:color";
@use "sass:list";
@use "sass:map";
// 颜色
$color-map: (
  "primary": #409eff,
  "success": #67c23a,
  "warning": #e6a23c,
  "danger": #f56c6c,
  "info": #909399,
  "white": white,
  "black": black,
);

@each $key, $color in $color-map {
  .btn-type-#{$key} {
    background-color: $color;
    color: white;
    &:hover {
      background-color: color.scale($color, $lightness: 10%);
    }
    &:active {
      background-color: color.scale($color, $lightness: 10%);
    }
    &:disabled {
      background-color: color.scale($color, $lightness: 20%);
    }
  }

  .icon-type-#{$key} {
    color: $color;
    fill: $color;
    &:hover {
      color: color.scale($color, $lightness: 10%);
    }
    &:active {
      color: color.scale($color, $lightness: 10%);
    }
    &:disabled {
      color: color.scale($color, $lightness: 20%);
    }
  }

  .text-type-#{$key} {
    color: $color;
    &:hover {
      color: color.scale($color, $lightness: 10%);
    }
    &:active {
      color: color.scale($color, $lightness: 10%);
    }
    &:disabled {
      color: color.scale($color, $lightness: 20%);
    }
  }
}

// 尺寸
$size-map: (
  "small": 0.9rem,
  "normal": 1rem,
  "large": 1.1rem,
);

@each $key, $value in $size-map {
  .btn-size-#{$key} {
    font-size: #{$value};
    padding: #{(calc($value / 4))} #{(calc($value / 2))};
  }
  .icon-size-#{$key} {
    width: #{$value};
    height: #{$value};
  }
  .text-size-#{$key} {
    width: #{$value};
    height: #{$value};
  }
}

// 边框角度
$border-radius: 4px;
